<template>
  <view class="countdown-container">
    <!-- 手动设置倒计时时长表单 -->
    <view class="countdown-form">
      <view class="form-group">
        <label>天:</label>
        <input type="number" v-model.number="formDays" min="0" max="99" />
      </view>
      <view class="form-group">
        <label>时:</label>
        <input type="number" v-model.number="formHours" min="0" max="23" />
      </view>
      <view class="form-group">
        <label>分:</label>
        <input type="number" v-model.number="formMinutes" min="0" max="59" />
      </view>
      <view class="form-group">
        <label>秒:</label>
        <input type="number" v-model.number="formSeconds" min="0" max="59" />
      </view>
    </view>

    <!-- 倒计时控制按钮 -->
    <view class="countdown-controls">
      <button class="control-btn" :disabled="isRunning" @click="startManualCountdown">
        <i class="fa fa-play"></i> 开始
      </button>
      <button class="control-btn" :disabled="isRunning" @click="stopManualCountdown">
        <i class="fa fa-stop"></i> 停止
      </button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 接收父组件传递的初始倒计时时间
    initialTime: {
      type: Object,
      default: () => ({ days: 0, hours: 0, minutes: 0, seconds: 0 })
    }
  },
  data() {
    return {
      // 倒计时状态
      days: this.initialTime.days,
      hours: this.initialTime.hours,
      minutes: this.initialTime.minutes,
      seconds: this.initialTime.seconds,
      // 表单输入值
      formDays: this.initialTime.days,
      formHours: this.initialTime.hours,
      formMinutes: this.initialTime.minutes,
      formSeconds: this.initialTime.seconds,
      // 倒计时是否正在运行
      isRunning: false,
      // 定时器引用
      timer: null
    };
  },
  watch: {
    // 监听 key 变化，重置组件状态
    $route: {
      handler() {
        this.resetCountdown();
      },
      deep: true
    }
  },
  created() {
    // 初始化倒计时数据
    this.resetCountdown();
  },
  beforeDestroy() {
    // 组件销毁前清除定时器
    this.clearTimer();
  },
  methods: {
    // 开始手动设置的倒计时
    startManualCountdown() {
      // 验证输入
      if (this.formDays === 0 && this.formHours === 0 && this.formMinutes === 0 && this.formSeconds === 0) {
        uni.showToast({
          title: '倒计时时间不能为0',
          icon: 'none'
        });
        return;
      }

      // 更新倒计时数据
      this.days = this.formDays;
      this.hours = this.formHours;
      this.minutes = this.formMinutes;
      this.seconds = this.formSeconds;

      // 开始倒计时
      this.isRunning = true;
      this.startTimer();

      // 通知父组件开始倒计时
      this.$emit('startManualCountdown', {
        days: this.days,
        hours: this.hours,
        minutes: this.minutes,
        seconds: this.seconds
      });
    },

    // 停止手动设置的倒计时
    stopManualCountdown() {
		console.log(111);
      this.clearTimer();
      this.isRunning = true;
      // 传递新的倒计时数据（全部为 0）给父组件
      this.$emit('stopManualCountdown', { days: 0, hours: 0, minutes: 0, seconds: 0 });
    },

    // 开始倒计时计时器
    startTimer() {
      this.timer = setInterval(() => {
        if (this.days === 0 && this.hours === 0 && this.minutes === 0 && this.seconds === 0) {
          this.clearTimer();
          this.isRunning = false;
          this.$emit('manualCountdownEnded');
          return;
        }

        // 更新倒计时
        if (this.seconds > 0) {
          this.seconds--;
        } else {
          if (this.minutes > 0) {
            this.minutes--;
            this.seconds = 59;
          } else {
            if (this.hours > 0) {
              this.hours--;
              this.minutes = 59;
              this.seconds = 59;
            } else {
              if (this.days > 0) {
                this.days--;
                this.hours = 23;
                this.minutes = 59;
                this.seconds = 59;
              }
            }
          }
        }
      }, 1000);
    },

    // 清除计时器
    clearTimer() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },

    // 重置倒计时状态
    resetCountdown() {
      this.clearTimer();
      this.days = this.initialTime.days;
      this.hours = this.initialTime.hours;
      this.minutes = this.initialTime.minutes;
      this.seconds = this.initialTime.seconds;
      this.formDays = this.initialTime.days;
      this.formHours = this.initialTime.hours;
      this.formMinutes = this.initialTime.minutes;
      this.formSeconds = this.initialTime.seconds;
      this.isRunning = false;
    }
  }
};
</script>

<style scoped>
.countdown-container {
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.countdown-display {
  font-size: 28px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.time-item {
  background-color: #333;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  margin: 0 5px;
  min-width: 40px;
  text-align: center;
}

.separator {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0 5px;
}

.countdown-controls {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  margin-top: 20px;
}

.control-btn {
  margin: 0 10px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}

.control-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.control-btn:hover:not(:disabled) {
  background-color: #45a049;
}

.countdown-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.form-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.form-group label {
  font-weight: bold;
  margin-right: 10px;
}

.form-group input {
  width: 60px;
  padding: 5px;
  border: 1px solid #ddd;
  border-radius: 5px;
  text-align: center;
}
</style>